<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <link rel="stylesheet" href="http://www.12301.cc/tpl/ui/common/ui_common.css"/>
    <script language="javascript" src="http://www.12301.cc/js/jquery-1.8.0.min.js"></script>
    <script type="text/javascript" src="http://www.12301.cc/js/echarts-2.2.1/build/dist/echarts-all.js"></script>
    <script language="javascript" src="js/index.js"></script>

<link rel="stylesheet" href="css/style.css"/>
<title>票付通旅游营销平台</title>
</head>
<body>
<div class="wrap">
    <h2 class="title">平台活跃用户/产品分析</h2>
    <div class="topBox">
        <div class="datebox" style="display:none;">
            <div class="startbox">
                <input type="text" readonly  id="startDate"/>
                <img src="images/dateicon.png"/>
            </div>
            <div class="datetxt">至</div>
            <div class="endtbox">
                <input type="text" readonly  id="endDate"/>
                <img src="images/dateicon.png"/>
            </div>
        </div>
            
        <img class="payLoadImg" src="http://www.12301.cc/images/load.gif" />
        <div class="datemsg colorBlue">
            <ul>
                <!-- <li class="colorOrange clear">清空</li> -->
                <li class="seven">7天</li>
                <li class="fourteen">14天</li>
                <li class="month">月</li>
                <li class="quarter">季度</li>
                <li class="year">年</li>
            </ul>
            <div class="tipMsg">
                <p>
                    <span class="setFont_result"></span>
                </p>
            </div>
            <input type="hidden" name="past" value="seven">
        </div>
    </div>
    <div class="con"></div>
    <div id="main" style="height:600px;border:1px solid #ccc;padding:10px;"></div>
</div>
<div class="ui-page">
    <ul class="dropBox"></ul>
</div>
<link rel="stylesheet" href="css/jquery.ui.css" type="text/css" />
<script type="text/javascript" src="js/jquery.ui.js"></script>
<script type="text/javascript" src="js/moment.min.js"></script>
<script type="text/javascript" src="js/stay.js"></script>
<script type="text/javascript" src="js/paystatus.js"></script>
<!-- <script language="javascript" src="js/active.js"></script> -->

<script type="text/javascript">
    var loadData = function(start_time, past) {
        $.ajax({
            url : "http://www.12301.cc/module/wxh/monthly/active_api.html",
            type : "POST",
            dataType : "json",
            data : {
                start_time : start_time,
                past : past
            },beforeSend:function()
            {
                $(".payLoadImg").css("display","inline-block");
            },success:function(result) {
                if (result.length <= 0) {
                    alert('此时间段内无数据返回');
                    return;
                }

                var myChart = echarts.init(document.getElementById('main'));

                var gongying = [], fenxiao = [], date = [], product = [];
                for (var index in result) {
                    gongying.push(result[index].a_count);
                    fenxiao.push(result[index].m_count);
                    date.push(result[index].date);
                    product.push(result[index].t_count);
                }
                
                var option = {
                    legend: {                                   // 图例配置
                        padding: 5,                             // 图例内边距，单位px，默认上下左右内边距为5
                        itemGap: 5,                            // Legend各个item之间的间隔，横向布局时为水平间隔，纵向布局时为纵向间隔
                        data: ['供应商', '分销商', '产品']
                    },
                    tooltip: {                                  // 气泡提示配置
                        trigger: 'item',                        // 触发类型，默认数据触发，可选为：'axis'
                    },
                    toolbox: {
                        show : true,
                        feature : {
                            dataView : {show: true},
                            magicType : {show: true, type: ['line', 'bar']},
                            restore : {show: true},
                            saveAsImage : {show: true}
                        }
                    },
                    xAxis: [                                    // 直角坐标系中横轴数组
                        {
                            type: 'category',                   // 坐标轴类型，横轴默认为类目轴，数值轴则参考yAxis说明
                            data: date
                        }
                    ],
                    yAxis: [                                    // 直角坐标系中纵轴数组
                        {
                            type: 'value',                      // 坐标轴类型，纵轴默认为数值轴，类目轴则参考xAxis说明
                            boundaryGap: [0, 0],            // 坐标轴两端空白策略，数组内数值代表百分比
                            splitNumber: 10                     // 数值轴用，分割段数，默认为5
                        }
                    ],
                    series: [
                        {
                            name: '供应商',                        // 系列名称
                            type: 'line',                       // 图表类型，折线图line、散点图scatter、柱状图bar、饼图pie、雷达图radar
                            data: gongying
                        },
                        {
                            name: '分销商',                    
                            type: 'line',                       
                            data: fenxiao
                        },
                        {
                            name: '产品',                    
                            type: 'line',                       
                            data: product
                        }
                    ]
                };
                myChart.setOption(option);
                myChart.setTheme('macarons');
                $("#main").append("<span style='position:relative;z-index:9999;left:150px;top:-590px;color:#A849A9;font-size:14px;'><strong>"+ date[0] + '~' + date[date.length - 1]+ "</strong></span>")
            },
            complete:function()
            {
                $(".payLoadImg").fadeOut("slow");
            }
        })
    }

    Date.prototype.changeEvent = loadData;

    $(function() {
        var past = $("input[name='past']").val();
        $("."+past).addClass('active');

        //初始化请求
        loadData($("#startDate").val(), past);

        $(".datemsg li").on('click', function() {
            $(".datemsg li").removeClass('active');
            var past = $(this).attr('class');
            $(this).addClass('active');
            loadData($("#startDate").val(), past);
        })
    })

</script>
</body>
</html>